<style lang="css" scoped>
.container {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column;
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.menu {
    border-radius: 12px;
    font-size: 18px;
    background: linear-gradient(135deg, rgba(223, 154, 255, 0.7) 0%, rgba(246, 255, 113, 0.7) 100%);
    border-bottom: 3px solid rgba(93, 34, 34, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

.menu:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.2);
}

.title .text {
    font-weight: 600;
    color: #5a2d8a;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.icon {
    transition: transform 0.3s ease;
    color: #5a2d8a;
}

.content {
    background-color: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
}

.list li {
    padding: 12px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    color: #555;
    font-size: 15px;
}

.list li:hover {
    background-color: rgba(113, 163, 255, 0.2);
    color: #2a5cbe;
    padding-left: 28px;
}

.list li.active {
    background-color: rgba(113, 163, 255, 0.15);
    color: #2a5cbe;
    font-weight: 500;
    border-left: 3px solid #2a5cbe;
}

.router-link-active li {
    background-color: rgba(113, 163, 255, 0.25) !important;
}

.recommendList {
    margin-top: 24px;
    padding: 10px;
    background-color: white;
    border-radius: 12px;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

.buyCart {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #6bbcff8f;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
</style>

<template>
    <div class="container">
        <!-- 分类菜单栏 -->
        <div class="menu">
            <div class="title" @click="showMenu()">
                <span class="text">分类</span>
                <el-icon class="icon" :class="{ 'rotate-180': open }">
                    <ArrowDownBold />
                </el-icon>
            </div>
            
            <transition name="fade">
                <div class="content" v-if="open">
                    <ul class="list">
                        <router-link to="/category/nature" custom v-slot="{ navigate, isActive }">
                            <li @click="navigate" :class="{ active: isActive }">自然风光</li>
                        </router-link>
                        <router-link to="/category/culture" custom v-slot="{ navigate, isActive }">
                            <li @click="navigate" :class="{ active: isActive }">人文景观</li>
                        </router-link>
                        <router-link to="/category/food" custom v-slot="{ navigate, isActive }">
                            <li @click="navigate" :class="{ active: isActive }">美食推荐</li>
                        </router-link>
                    </ul>
                </div>
            </transition>
        </div>
        
        <!-- 推荐列表 -->
        <div class="recommendList">
            <RecommendList />
        </div>

        <!-- 购物车 -->
        <div class="buyCart">
            <img src="../../assets/img/buyCart.png" alt="购物车"  @click="openCart"/>
        </div>
    </div>
</template>

<script setup>
import { ArrowDownBold } from '@element-plus/icons-vue';
import RecommendList from '../../components/RecommendList.vue';
import { ref } from 'vue';

const open = ref(false);

function showMenu() {
    open.value = !open.value;
}
</script>